<template>
  <view class="trade">

    <view class="account-button">
      <u-button type="primary" text="日历控件" @click="isShow = true">
      </u-button>
    </view>



    <u-calendar ref="calendar" :show="isShow" :mode="mode" @confirm="confirm" :formatter="formatter" monthNum="12"
      :maxDate="maxDate"  showLunar></u-calendar>




    <u-modal :show="showPopup" title="日历多选" :content='content'  @confirm="showPopup = false"></u-modal>
  </view>
</template>

<script>
import { dateFormat } from "@/utils/utils.js";
export default {
  data() {
    return {
      isShow: false,  //true 显示  日历
      mode: 'multiple',
      showPopup: false,
      content: '', //日历多选的拼接
    }
  },
  computed: {
    minDate() {
      let now = new Date()
      let mounth = now.getMonth()
      now.setMonth(mounth - 2)


      return dateFormat(now)
    },
    maxDate() {
      let now = new Date()
      let year = now.getFullYear()
      now.setFullYear(year + 1)


      return dateFormat(now)
    }
  },
  onReachBottom() {
  },
  onLoad() {
  },
  methods: {
    // 详情页面
    // toDetail(item) {
    // 	uni.navigateTo({
    // 		url: '/pagesA/trade/detail?TrbId=' + item.TrbId
    // 	})
    // }
    // 确认
    confirm(arr) {
      console.log(arr);

      arr.sort((a,b)=>{
        return new Date(a) - new Date(b)
      })

      this.content = '';
      arr.forEach((item, index) => {
        let str = '';
        if (index !== arr.length - 1) {
          str = '，';
        }
        this.content += dateFormat(new Date(item),'YYYY年MM月DD日') + str;
      })
 

      this.isShow = false;

      setTimeout(() => {
        this.showPopup = true;
      }, 100);
    },
    formatter(day) {
      // const d = new Date()
      // let month = d.getMonth() + 1
      // const date = d.getDate()
      // if (day.month == month && day.day == date + 3) {
      //   day.bottomInfo = '有优惠'
      //   day.dot = true
      // }


      switch (day.week) {
        //周天 是 0
        case 1: case 3: case 5:   //周一  //周三  //周五
          day.dot = true
          break;
        default:
          break;
      }

      return day
    },
  },
  // onShow() {
  //   this.getSecondaryOptions()
  // },
  onReady() {
    // 如果需要兼容微信小程序的话，需要用此写法
    this.$refs.calendar.setFormatter(this.formatter)
  },
}
</script>

<style lang="scss" scoped>
.active {
  color: #51a1ff;

  text {
    color: #51a1ff !important;
  }
}

.trade {
  width: 100%;
  background-color: #f2f8ff;
  min-height: 100vh;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;


  .account-button {
    width: 90%;
    height: 100rpx;
    margin: 40rpx auto;

    ::v-deep .u-button--primary {
      height: 80rpx !important;
      width: 100% !important;
      border-radius: 20rpx !important;
      background-color: linear-gradient(90deg, #89cfff 0%, #51a1ff, #51a1ff) !important;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(74, 144, 226, 0.20) !important;
      color: #ffffff !important;

      .u-button__text {
        font-size: 34rpx !important;
      }
    }
  }
}


.popModal {}
</style>